<template>
    <div class="home">
        <el-input
                @focus="dialogTableVisible = true"
                v-model="keyword"
                placeholder="请输入关键词名称"
                clearable
                size="medium"
                suffix-icon="el-icon-search"
                style="margin-bottom: 20px; width: 400px"
        />
        <el-dialog title="人员搜索" width="60%" :visible.sync="dialogTableVisible">
            <div>
                <el-popover
                        placement="top-start"
                        title="搜索字段"
                        width="auto"
                        trigger="hover"
                >
                    <div>
                        <el-radio-group size="mini" v-model="radioValue">
                            <el-radio-button v-for="(item, index) in columns" :key="index" :label="item.value">{{
                                item.label }}
                            </el-radio-button>
                        </el-radio-group>
                    </div>
                    <el-input
                            slot="reference"
                            v-model="searchContent"
                            placeholder="请输入内容搜索"
                            clearable
                            size="small"
                            suffix-icon="el-icon-search"
                            style="margin-bottom: 20px; width: 400px"
                    />
                </el-popover>
                <right-toolbar style="float: right" @queryTable="getList" :columns="columns"></right-toolbar>
                <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
                    <!-- <el-table-column type="selection" width="50" align="center"/>
                     <el-table-column label="编号" align="center" key="id" prop="id" v-if="columns[0].visible"/>
                     <el-table-column label="名称" align="center" key="name" prop="name" v-if="columns[1].visible"
                                      :show-overflow-tooltip="true"/>
                     <el-table-column label="年龄" align="center" key="age" prop="age" v-if="columns[2].visible"
                                      :show-overflow-tooltip="true"/>
                     <el-table-column label="邮箱" align="center" key="email" prop="email" v-if="columns[3].visible"
                                      :show-overflow-tooltip="true"/>
                     <el-table-column label="地址" align="center" key="address" prop="address" v-if="columns[4].visible"/>
                     <el-table-column label="部门" align="center" key="deptName" prop="dept.deptName"
                                      v-if="columns[5].visible"/>-->
                    <el-table-column type="selection" width="50" align="center"/>
                    <el-table-column
                            v-for="i in labelArray.length"
                            :prop="columnArray[i-1]"
                            :label="labelArray[i-1]"
                            width="180"
                            :show-overflow-tooltip="true"
                            v-if="columns[i-1].visible"
                    >
                    </el-table-column>
                </el-table>
                <pagination
                        v-show="total>0"
                        :total="total"
                        :page.sync="queryParams.pageNum"
                        :limit.sync="queryParams.pageSize"
                        @pagination="getList"
                />
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="btnConcel">取 消</el-button>
                <el-button type="primary" @click="btnConfirm">确 定</el-button>
             </span>
        </el-dialog>
    </div>
</template>

<script>

    export default {
        props: {
            url: {
                type: String,
                default: () => ''
            },
            labelArray: {
                type: Array,
                default: () => []
            },
            columnArray: {
                type: Array,
                default: () => []
            },
        },
        name: 'Home',
        components: {},
        data() {
            return {
                selectionList: [],
                ids: [],
                radioValue: '',
                searchContent: '',
                // 总条数
                total: 0,
                // 查询参数
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    userName: undefined,
                    phonenumber: undefined,
                    status: undefined,
                    deptId: undefined
                },
                dialogTableVisible: false,
                keyword: '',
                // 遮罩层
                loading: true,
                userList: [],
                columns: [],
                // 列信息
/*                columns: [
                    {key: 0, label: `编号`, visible: true, value: 'id'},
                    {key: 1, label: `名称`, visible: true, value: 'name'},
                    {key: 2, label: `年龄`, visible: true, value: 'age'},
                    {key: 3, label: `邮箱`, visible: true, value: 'email'},
                    {key: 4, label: `地址`, visible: true, value: 'address'},
                ],*/
            }
        },
        mounted() {
            this.getList()
            for (let i = 0; i < this.labelArray.length; i++) {
                this.columns.push(
                    {key: i, label: this.labelArray[i], visible: true, value: this.columnArray[i]},
                )
            }
            console.log(this.columns)
        },
        watch: {
            searchContent(val) {
                if (!val) {
                    this.getList()
                }
                // String() 将一切都转为 String 类型
                return this.userList = this.userList.filter(s => String(s[`${this.radioValue}`]).includes(val));
            },
            radioValue(val) {
                console.log(val)
            }
        },
        methods: {
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id);
                this.selectionList = selection
            },
            getList() {
                this.loading = true;
                this.$axios.get('http://localhost:8080' + this.url).then(res => {
                    console.log(res)
                    this.userList = res.data
                    this.loading = false
                })
            },
            btnConfirm() {
                this.$emit('callback', this.selectionList)
                this.$emit('input', this.selectionList)
                this.dialogTableVisible = false
            },
            btnConcel() {
                this.selectionList = []
                this.dialogTableVisible = false
            }
        }
    }
</script>
